<template>
    <view class="content">
		<image src="../../static/tabbar/return.png" mode="" class="page-return" @tap="back"></image>
		
		<view class="page-div">
			<view class="remind">
				<image src="../../static/page/right2.png" mode="widthFix" class="remind-img"></image>
				
				<view class="text">
					<text>小蜜提醒您</text><br />
					如对方二维码不能加好友<br />
					请打对方联系电话，<br />
					五小时内必须完成订单确认哦！<br />
				</view>
				
				<view class="order">
					订单号：<text>{{order}}</text>
				</view>
				
				<view class="person" v-for="(li, index) in userlist" :key="index">
					<image :src="li.head" mode="" class="per-img"></image>
					
					<view class="account">
						<view class="name">手机：{{account}}</view>
						<view class="name">姓名：{{nickname}}</view>
					</view>
					
					<view class="qrcode">
						<view class="weixin">{{li.text}}</view>
						<image :src="li.qrcode" mode="widthFix" class="qr-img"  @click="popup(li.qrcode)"></image>
					</view>
					
					<view class="tisimg">
						添加好友后，记得核实 ID 号码，才确认订单！
					</view>
				</view>
				
				<view class="userlist" @tap="person" v-if="type == 1">查看全部好友码</view>
				
				<view class="form">
					<view class="form-input">
						<image :src="imageSrc" class="images" mode="widthFix"></image>
						
						<view class="input">{{indent}}</view>
					</view>
				</view>
				
				<block v-if="btn == 0">
					<button class="btn-submit">{{i18n.close.confirm3}}</button>
				</block>
				
				<block v-else-if="btn == 1">
					<view class="form1">
						<button class="btn-submit" @tap="submit" v-if="status == 1">{{i18n.close.confirm1}}</button>
						<button class="btn-submit" v-else>{{i18n.close.confirm1}}</button>
					</view>
				</block>
				
				<block v-else>
					<button class="btn-submit2">{{i18n.close.confirm2}}</button>
				</block>
				
				
				
				<view class="introduce">
					如果对方没有联系您，你可主动添加对方<br />
					第一步：先保存上方二维码，加对方微信好友。<br />
					第二步：确认对方的ID号。<br />
					第三步：叫对方给你发150。<br />
					第四步：你收到150后，给对方确认。
				</view>
			</view>
		</view>
		
		<uni-popup :show="showPopup" type="middle" v-on:hidePopup="hidePopup">
			<view class='popup' @tap="shut">
				<image :src="img" mode="widthFix"></image>
			</view>
		</uni-popup>
		
		<image src="../../static/page/page.png" mode="" class="back_img"></image>
    </view>
</template>

<script>
	import service from '../../service.js';
	import pageHead from '../../components/page-head.vue';
	import uniPopup from "@/components/uni-popup.vue";
	import uniCountdown from "@/components/uni-countdown.vue";
	import mInput from '../../components/m-input.vue';

	export default {
		computed: {
			i18n () {
				return this.$t('index');
			}
		},
		components: {
			uniCountdown,
			uniPopup,
			pageHead,
			mInput
        },
		data() {
			return {
				orderid:uni.getStorageSync('orderid'),
				showPopup:false,
				nickname:'',
				account:'',
				order:'',
				userlist:[],
				twolist:[],
				type:1,
				img:'',
				imageSrc:'',
				indent:'',
				status:1,
				btn:0,
			};
		},
		onShow:function(){
			uni.setNavigationBarTitle({
				title: this.i18n.pages.passive
			});
			service.upload(this, service.api.close.passive, {
				'orderid': this.orderid
			}, '', '', function(self, res) {
				if(res.code == 1){
					res = res.data;
					self.nickname = res.realname;
					self.account = res.phone;
					self.order = res.ordersn;
					self.imageSrc = res.image;
					self.indent = res.paynum;
					self.btn = res.status;
					self.userlist = [{
						'text':self.i18n.close.wechat,
						'qrcode':res.wechat_qrcode,
						'name':res.wechat,
						'head':'../../static/center/1171650211886612480.png',
					}];
					self.twolist = {
						'text':self.i18n.close.alipay,
						'qrcode':res.alipay_qrcode,
						'name':res.alipay,
						'head':'../../static/center/1171650211886612480.png',
					}
				}else{
					uni.showModal({
						title: self.i18n.code.warm,
						content: res.info,
						confirmText: self.i18n.code.confirm,
						confirmColor: '#FFAE00',
						cancelColor: '#D2D2D2',
						showCancel: false,
						success: function(res) {
							uni.switchTab({
								url: '/pages/main/close',
							});
						}
					});
				}
			});
		},
		methods:{
			back(){
				uni.switchTab({
					url: '/pages/main/close'
				})
			},
			//统一的关闭popup方法
			hidePopup: function() {
				this.showPopup = false;
			},
			shut(){
				this.showPopup = false
			},
			popup(img){
				this.img = img;
				this.showPopup = true;
			},
			submit(){
				self = this;
				self.status = 0;
				service.upload(this, service.api.close.pay, {
					'orderid': self.orderid,
					'order_num': self.indent,
				}, self.imageSrc, 'image', function(_self, res) {
					uni.showToast({
						icon: 'none',
						title: res.info
					});
					self.status = 1;
					if(res.code == 1){
						self.type = 0;
						setTimeout(function(){
							uni.navigateBack({
								delta: 1
							});
						}, 1000);
					}else{
						self.status = 1;
					}
				});
				
			},
			save(){
				uni.chooseImage({
					count: 1,
					sourceType: ['camera'],
					sourceType: ['album','camera'],
					success: function (res) {
						uni.saveImageToPhotosAlbum({
							filePath: '../../static/image/qrcode.jpg',
							success: function () {
								console.log('save success');
							}
						});
					}
				});
			},
			person(){
				this.userlist.push(this.twolist);
				this.type = 0;
			},
		}
    }
</script>

<style lang="scss">
	.content{
		padding: 0;
		background: #F2F2F2;
	}
	.page-return{
		top: 0;
		z-index: 1000;
	}
	.back_img{
		margin: 0;
		height: 100%;
	}
	.page-div{
		height: 200%;
		z-index: 35;
		margin: 40upx;
		position: relative;
		border-radius: 20upx;
		background-size: 100%;
		width: calc(100% - 80upx);
		background: rgba(255,255,255,.5);
		box-shadow: 0 10upx 30upx 0 rgba(21,65,233,.45), 0 3px 8px 2px rgba(0,0,0,.2);
	}
	.div-img{
		width: 100%;
		height: 370upx;
	}
	.remind{
		z-index: 36;
		position: relative;
		.text{
			color: #333333;
			font-size: 30upx;
			line-height: 50upx;
			margin: 30upx 40upx 0;
			text{
				color: #F793A4;
				font-size: 42upx;
				font-weight: bold;
			}
		}
		.remind-img{
			float: right;
			width: 200upx;
			height: 250upx;
		}
		.order,.person{
			color: #FFFFFF;
			padding: 10upx;
			font-size: 32upx;
			text-align: left;
			line-height: 60upx;
			border-radius: 20upx;
			margin: 30upx 40upx 0;
			background-color: #F793A4;
			width: calc(100% - 100upx);
			box-shadow: 0 0 10px rgba(0,0,0,.3);
			
			.per-img{
				float: left;
				width: 120upx;
				height: 120upx;
				border-radius: 50%;
				margin: 0 20upx;
			}
			.account{
				float: left;
				height: 180upx;
				color: #F793A4;
				font-size: 28upx;
				text-align: left;
				margin-top: -20upx;
				width: calc(100% - 160upx);
				.name{
					text-indent: 20upx;
					line-height: 50upx;
					margin: 20upx 40upx;
					background: #FFFFFF;
					border-radius: 25upx;
					width: calc(100% - 80upx);
					box-shadow: 0 3px 10px 0 rgba(32,36,161,.27);
				}
			}
			.qrcode{
				width: 100%;
				.weixin{
					font-size: 28upx;
					text-align: center;
				}
				.code-img{
					width: 240upx;
					background: #871de8;
					padding-bottom: 2upx;
					margin: 0 calc(50% - 120upx);
				}
				.code-box{
					width: 240upx;
					height: 240upx;
					overflow: hidden;
					margin-bottom: 10upx;
				}
				.qr-img{
					margin: 10upx 25%;
					height: 300upx;
					width: 50%;
				}
				.code-btn{
					height: 70upx;
					margin: 10upx;
					color: #FFFFFF;
					font-size: 30upx;
					line-height: 70upx;
					background: #26C4C0;
					border-radius: 35upx;
				}
			}
			.tisimg{
				height: 60upx;
				color: #F793A4;
				font-size: 24upx;
				padding: 0 20upx;
				line-height: 60upx;
				background: #FFFFFF;
				border-radius: 30upx;
				margin: 20upx 10upx 0;
			}
		}
		.person{
			padding: 30upx 10upx;
		}
		.userlist{
			width: 100%;
			height: 60upx;
			color: #333333;
			margin: 10upx 0;
			font-size: 32upx;
			text-align: center;
			line-height: 60upx;
			
		}
	}
	.introduce{
		display: flex;
		color: #333333;
	    flex-wrap: wrap;
		font-size: 32upx;
		flex-direction: row;
		display: inline-flex;
		margin: 20upx 40upx 50upx;
		text{
			color: #FFFFFF;
			font-size: 36upx;
			margin-left: 10upx;
		}
	}
	.uni-countdown{
		width: 220upx;
	}
	.popup image{
		width: 100%;
	}
	.form{
		display: flex;
        flex-wrap: wrap;
		flex-direction: row;
		display: inline-flex;
		width: 100%;
		margin-top: 40upx;
		border-top: 2upx solid #BBBBBB;
	}
	.form-input{
		width: calc(100% - 120upx);
		margin: 30upx 60upx 0;
	}
	.form-input .input{
		height: 60upx;
		color: #ffffff;
		color: #ffffff;
		margin: 30upx 0 0;
		line-height: 60upx;
		background: #F793A4;
		border-radius: 20upx;
		padding: 10upx 20upx;
		width: calc(100% - 40upx);
	}
	.form-input .bottom{
		margin-bottom: 30upx;
	}
	.btn-submit,.btn-submit2{
		color: #FFFFFF;
		background: #6FA9FC;
		border-radius: 60upx;
		height: 80upx;
		line-height: 80upx;
		margin: 30upx 20% 0;
	}
	.btn-submit2{
	}
	.img{
		color: #DDD;
		width: 100%;
		height: 300upx;
		font-size: 40upx;
		text-align: center;
		line-height: 300upx;
		background-color: #fff;
		border: 4upx dashed #DDD;
	}
	.images{
		width: 100%;
	}
</style>
